<template>
  <div class="category-filter-container">
    <h3 class="filter-title">类别筛选</h3>
    <div class="category-buttons">
      <button
        v-for="category in categories"
        :key="category.value"
        class="category-button"
        :class="{ active: selectedCategory === category.value }"
        @click="selectCategory(category.value)"
      >
        {{ category.label }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CategoryFilter',
  props: {
    selectedCategory: {
      type: String,
      default: 'all'
    }
  },
  emits: ['category-change'],
  data() {
    return {
      categories: [
        { label: '全部', value: 'all' },
        { label: '中餐', value: 'chinese' },
        { label: '西餐', value: 'western' },
        { label: '日料', value: 'japanese' },
        { label: '韩餐', value: 'korean' },
        { label: '快餐', value: 'fastfood' },
        { label: '小吃', value: 'snack' },
        { label: '甜品', value: 'dessert' },
        { label: '饮品', value: 'drink' }
      ]
    };
  },
  methods: {
    selectCategory(category) {
      this.$emit('category-change', category);
    }
  }
}
</script>

<style scoped>
.category-filter-container {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.filter-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-button {
  padding: 8px 16px;
  border: 2px solid #e9ecef;
  background: white;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.category-button:hover {
  border-color: #409eff;
  color: #409eff;
  transform: translateY(-1px);
}

.category-button.active {
  background: #409eff;
  border-color: #409eff;
  color: white;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.category-button.active:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .category-filter-container {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .filter-title {
    font-size: 15px;
    margin-bottom: 12px;
  }
  
  .category-buttons {
    gap: 8px;
  }
  
  .category-button {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 18px;
  }
}

@media (max-width: 480px) {
  .category-filter-container {
    padding: 14px;
  }
  
  .filter-title {
    font-size: 14px;
  }
  
  .category-buttons {
    gap: 6px;
  }
  
  .category-button {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 16px;
  }
}
</style>